<!--
 * @Description: 
 * @Author: shilinzhou
 * @Date: 2024-02-26 15:00:01
 * @LastEditors: shilinzhou
 * @LastEditTime: 2024-03-15 16:48:46
-->
<template>
    <div class="gantt-leftBar">
        <div
            class="left-bar-wrapper"
            :style="{
                height: data.length * cellHeight + 'px',
                width: `${cellWidth}px`
            }"
        >
            <div
                v-for="(item, index) in data"
                v-show="!item.hideRow"
                :key="index"
                :class="['gantt-leftBar-item']"
                :style="{
                    top: item.rowIndex * cellHeight + 'px',
                    height: `${cellHeight}px`,
                    width: `${cellWidth}px`
                }"
            >
                <slot :rowData="item">
                    <div class="gantt-leftBar-defaultItem">need slot</div>
                </slot>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { Records } from '@/api/plan/gantt/model/type';

defineProps<{
    data: Records[]; // 数据
    cellHeight: number; // 单元格高度
    cellWidth: number;
}>();
</script>
<style lang="scss" scoped>
.gantt-leftBar {
    display: flex;

    .left-bar-wrapper {
        position: relative;

        .gantt-leftBar-item {
            position: absolute;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            padding: 0 10px;
            text-align: left;
            box-shadow: 0 1px 0 0 rgb(17 0 0 / 8%);
        }
    }
}
</style>
